<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{width: 400px;height: 600px;margin: 0 auto;padding: 20px 0;background-color: #e5e5e5;position: relative;}
		p{font-size: 26px;}
		.box p:nth-child(1){float: left;margin-left: 20px;}
		.box p:nth-child(2){float: right;margin-right: 20px;}
		#dawz{font-size: 200px;position: absolute;left: 50%;top: 150px;margin-left: -100px;}
		#xiaowz{position: absolute;bottom: -10px;}
		#xiaowz p{display: inline-block;margin-left: 23px;font-size: 50px;}
	</style>
</head>
<body>
	<div class="box">
		<p>剩余时间:<span id="sj">10</span></p>
		<p>完成:<span id="cj">0</span></p>
		<div id="dawz">绿</div>
		<div id="xiaowz">
			<p>绿</p>
			<p>红</p>
			<p>黄</p>
			<p>黑</p>
			<p>蓝</p>
		</div>
	</div>
</body>
<script type="text/javascript">
	var sj=document.getElementById("sj");
	var cj=document.getElementById("cj");
	var dawz=document.getElementById("dawz");
	var xiaowz=document.getElementById("xiaowz").getElementsByTagName("p");

	var da=["绿", "黄", "黑", "蓝", "红"];
	var ys=["green", "yellow", "black", "blue", "red"];
	var count=null;
	var timeBol = false; //时间开关
	var clickBol = true; //点击开关
	// 大文字
	function dwz(){
		sjs=rand(0,5);
		var wzsj=rand(0,5);
		dawz.style.color=ys[sjs];
		dawz.innerHTML=da[wzsj];
	}
	
	// 小文字
	function xwz(){
		var arr=[];
		while (arr.length<5){
			var randFn=rand(0,5);
			var bol = true;
			for (var i = 0; i < arr.length; i++) {
				if (arr[i]==randFn) {
					bol = false;
					break;
				}
			}
			if (bol) {
				arr.push(randFn);
			}
		}
		return arr;
	}
	function wz(){
		var colorArr = xwz();
		var fontArr = xwz();

		for (var i = 0; i < colorArr.length; i++){
			xiaowz[i].style.color = ys[colorArr[i]];
			xiaowz[i].innerHTML = da[fontArr[i]];
			xiaowz[i].fontIndex = fontArr[i];
		}
	}
	// 点击
	for (var i = 0; i < xiaowz.length; i++) {
		xiaowz[i].onclick=function(){
			if (this.fontIndex==sjs&&clickBol) {
				timeBol = true;
				dwz();
				wz();
				count++;
				cj.innerHTML=count;
			}
		}
	}

	// 初始化
	function init(){
		dwz();
		wz();
	}
	init();

	// 时间
	var num=10;
	var time=setInterval(function(){
		if (timeBol) {
			num--;
			if (num>=0) {
				sj.innerHTML=num;
			}else{
				clearInterval(time);
				alert("游戏结束，你的成绩是:"+count);
				time = null;
				num = 0;
				clickBol = false;
			}
		}
	},1000)

	// 随机数
	function rand(min,max){
		return parseInt(Math.random()*(max-min)+min);
	}
</script>
</html>